<template>
  <div class="contents">
    <el-form class="demo-form-inline" :inline="true" label-position="right" label-width="80px" :model="formInline">
      <el-form-item label="创建日期:">
        <el-date-picker v-model="listquerydata.createTimeList" value-format="yyyy-MM-dd" class="writeWidth"
          end-placeholder="结束日期" range-separator="-" start-placeholder="开始日期" type="daterange" />
      </el-form-item>
      <el-form-item label="结算单号:">
        <el-input v-model="listquerydata.no" class="writeWidth" placeholder="请输入结算单号" />
      </el-form-item>
      <el-form-item :style="{ visibility: !openCol ? 'hidden' : 'visible' }">
        <el-button type="primary" @click='getList'>查询</el-button>
      </el-form-item>
      <el-form-item>
        <el-button style="margin-left: 85px;" type="text" @click="clickOpen">
          <span :style="{ visibility: openCol ? 'hidden' : 'visible' }">
            收起
          </span>
          高级筛选
          <vab-icon :icon="openCol ? 'arrow-down-s-line' : 'arrow-up-s-line'" />
        </el-button>
      </el-form-item>
      <!-- <br /> -->
      <div v-show="!openCol">
        <el-form-item label="单据状态:">
          <el-select clearable v-model="listquerydata.status" class="writeWidth" placeholder="请选择">
            <el-option v-for="(item,i) in opt1" :key="i" :label="item.name" :value="item.id" />
          </el-select>
        </el-form-item>
        <el-form-item label="支付方式:">
          <el-select clearable v-model="listquerydata.payType" class="writeWidth" placeholder="请选择">
            <el-option v-for="(item,i) in opt2" :key="i" :label="item.value" :value="item.value" />
          </el-select>
        </el-form-item>
        <el-form-item label="采购模式:">
          <el-select clearable v-model="listquerydata.purchaseType" class="writeWidth" placeholder="请选择">
            <el-option v-for="(item,i) in opt3" :key="i" :label="item.value" :value="item.value" />
          </el-select>
        </el-form-item>
        <br />
        <el-form-item style="margin-left: 80px;">
          <el-button type="primary" @click='getList'>查询</el-button>
          <el-button @click='initfunc'>重置</el-button>
        </el-form-item>
      </div>
    </el-form>
    <el-table :data="tableData.list" style="width: 100%;">
      <el-table-column fixed label="结算单号" prop="no" width="200" />
      <el-table-column label="仓库" prop="warehouseInfo.name" width="120" />
      <el-table-column label="采购员/供应商" prop="purchaseSupplier.name" width="120" />
      <el-table-column label="应付金额" prop="total" width="120" />
      <el-table-column label="实付金额" prop="totalPayed" width="120" />
      <el-table-column label="未付金额" prop="totalUnpayed" width="120" />
      <el-table-column label="结算日期">
        <template slot-scope="scope">
          {{scope.row.ballanceTime}}
        </template>
      </el-table-column>
      <el-table-column label="状态">
        <template slot-scope="scope">
          {{scope.row.status | statusparams}}
        </template>
      </el-table-column>
    </el-table>
    <div class="bottom-desc">
      <el-pagination background layout="total, prev, pager, next,sizes" :page-size="listquerydata.pagesize"
        :current-page="listquerydata.current" @size-change="handleSizeChange" @current-change="handleCurrentChange"
        :page-sizes="[10,20, 30, 40, 50]" :total="tableData.total" />
    </div>
  </div>
</template>

<script>
  import {
    getlistAll,
    getlissystem
  } from '@/api/Finance/purchaseSettlementList.js'
  // /system/dict_value/query
  export default {
    data() {
      return {
        // createTimeList":[]
        // "payType":NULL
        // "channel":NULL
        // "warehouseId":1
        // "no":1
        listquerydata: {
          pagesize: 10,
          current: 1,
          createTimeList: [],
          no: '',
          status: '',
          payType: '', //支付方式
          purchaseType: '',
        },
        openCol: true,
        formInline: {
          user: '',
          region: '',
        },
        value: [],
        opt1: [], //单据状态
        opt2: [], //支付方式
        opt3: [], //采购类型
        tableData: {},
      }
    },
    async created() {
      let res = await getlissystem({
        "dict_code": "purchaseType",
      })
      this.opt3 = res.data.records //采购类型

      res = await getlissystem({
        "dict_code": "channel"
      })
      this.opt2 = res.data.records //支付方式

      res = await getlissystem({
        "dict_code": "ballanceStatus",
      })
      this.opt1 = res.data.records //订单状态

      console.log(res.data.records);

      this.getList()
    },
    filters: {
      statusparams(val) {
        if (val == 0) {
          return '未结算'
        } else if (val == 1) {
          return '已结算'
        } else {
          return '部分结算'
        }
      }
    },
    methods: {
      clickOpen() {
        this.openCol = !this.openCol
      },
      async getList() {
        let res = await getlistAll(this.listquerydata)
        this.tableData = res
        console.log(res);
      },
      handleSizeChange(val) {
        this.listquerydata.pagesize = val
        this.getList()
      },
      handleCurrentChange(val) {
        this.this.listquerydata.current = val
        this.getList()
      },
      initfunc() {
        this.listquerydata = {
          pagesize: 10,
          current: 1,
          createTimeList: [],
          no: '',
          status: '',
          payType: '', //支付方式
          purchaseType: '',
        }
        this.getList()
      }
    },
  }
</script>

<style lang="scss" scoped>
  .contents {
    padding: 10px 20px;

    .writeWidth {
      width: 233px;
    }

    .bottom-desc {
      padding: 10px 0;
      display: flex;
      align-items: center;
      justify-content: flex-end;
    }
  }
</style>
